<template>
  <div class="custom-form">
    <div class="title">个人信息</div>
    <el-form ref="form" :model="form" label-width="0px" :rules="rules">
      <el-form-item label="" prop="name">
        <el-input v-model="form.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="" prop="idCard">
        <el-input v-model="form.idCard" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item label="">
        <div class="sex-box">
          <div class="bg radio-bg">
            <span>男</span>
            <el-radio v-model="form.sex" :label="1" disabled>
              <span></span>
            </el-radio>
          </div>
          <div class="bg radio-bg">
            <span>女</span>
            <el-radio v-model="form.sex" :label="2" disabled>
              <span></span>
            </el-radio>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="" prop="birthday">
        <el-date-picker :default-value="timeDefaultShow" :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss" v-model="form.birthday" type="date" disabled placeholder="出生日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="form.peopleType" placeholder="人员类别" clearable>
          <el-option v-for="(v,i) in type" :label="v.name" :value="v.val" :key="i"></el-option>
        </el-select>
      </el-form-item>
      <div class="sub-style">
        <div>
          <el-form-item label="" prop="workTime">
            <el-date-picker :required="isHaveTo" :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="form.notWorkExp" prefix-icon="" v-model="form.workTime" type="date" placeholder="参加工作时间">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="">
            <div class="bg radio-bg">
              <span>无经验</span>
              <el-checkbox v-model="form.notWorkExp">
                <span></span>
              </el-checkbox>
            </div>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="" prop="mail">
        <el-input v-model="form.mail" placeholder="电子邮箱"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="next('form')">下一步</el-button>
  </div>
</template>

<script>
import { getDetail, getPersonType } from '../../../api/registerInfo.js';
import { analysisIdCard } from '../../../utils/analysisIdCard'
export default {
  props: ['resumeId'],
  data () {
    let validateName = (rule, value, callback) => {
      if (!value && this.isHaveTo) {
        callback(new Error("请选择参加工作时间"));
      } else {
        callback();
      }
    }
    return {
      timeDefaultShow: '',
      default: null,
      pickerOptions: {},
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      type: [],
      form: {
        workTime: "",
        idCard: "",
        sex: '',
        mail: '',
        birthday: '',
        peopleType: null,
        notWorkExp: false,
        step: 2
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '请输入20字以内', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}[01]\d[0123]\d\d{3}[xX\d]$/, message: '身份证号输入错误' }
        ],
        workTime: [
          { validator: validateName, trigger: 'blur' },
        ],
        mail: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '电子邮箱格式不正确', trigger: 'change' },
          { max: 40, message: '请输入40字以内', trigger: 'change' }
        ]
      }
    };
  },
  components: {

  },
  computed: {
    isHaveTo () {
      return !this.form.notWorkExp;
    }
  },
  watch: {
    'form.idCard': function (val) {
      if (val) {
        if (/^[1-9]\d{5}(19|20)\d{2}[01]\d[0123]\d\d{3}[xX\d]$/.test(val)) {
          let obj = analysisIdCard(val);
          this.form.sex = obj.sex;
          this.form.birthday = obj.birthday;
        }
      }
    },
    'form.notWorkExp': function (val) {
      if (val) {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === 'workTime') {
            this.form.workTime = '';
            i.clearValidate()
          }
        })
      } else {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === 'workTime') {
            i.validate()
          }
        })
      }
    }
  },
  created () {
    getPersonType().then(res => {
      if (res.success) {
        this.type = res.data.people_type || []
      }
    })
    let date = new Date();
    let year = date.getFullYear() - 16;
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    let startDate = year + "-" + month + "-" + day;
    this.pickerOptions.disabledDate = (time) => {
      return time.getTime() > new Date(startDate).getTime()
    }

    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setYear(new Date().getFullYear() - 16);
    this.form.resumeId = this.resumeId || '';
    this.getInfo();
  },
  mounted () {
    let _field = this.$refs['form'].fields
    _field.map(i => {
      if (i.prop === 'workTime') {
        i.clearValidate()
      }
    })
  },
  methods: {
    next (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('save', { ...this.form })
        } else {
          return false;
        }
      });
    },
    getInfo () {
      getDetail(2).then(res => {
        if (res.success) {
          if (res.data) {
            this.form = { ...this.from, ...res.data };
          }
          this.form.step = 2;
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    }
  }
};
</script>

<style scoped>
.title {
    color: #222222;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 38px;
}
.sub-style {
    display: flex;
    justify-content: space-between;
}
.bg {
    width: 100%;
    background: #f8f8f8;
    padding: 12px 24px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: inline-block;
}
.sub-style .bg {
    padding: 12px 20px;
}
.sex-box {
    display: flex;
}
.radio-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
}
.radio-bg:first-child {
    margin-right: 36px;
}
.sub-style > div:first-child {
    width: 237px;
}
.sub-style > div:last-child {
    width: 107px;
}
.el-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    margin-top: 29px;
}
</style>